<template>
	<view>
		<view class="border-gray-200 border leading-8 pl-2 w-full h-8" @click="showOrHideChoose">{{selectItem&&selectItem.name ?selectItem.name:showLabel}}</view>
		<u-popup :show="show" @close="close" @open="open">
			<view class="u-page" style="height:80vh;">

				<u-list style="width: 100%;height: 100%;">
					<u-search placeholder="搜索..." style="padding: 40rpx 20rpx;" :showAction="false" @change="search"
						v-model="keyword"></u-search>
					<u-list-item v-for="(item, index) in dataLists" :key="index">
						<u-cell :clickable="true" :data-item="item" @click="select(item)" :title="item.name"
							titleStyle="height:60rpx;line-height:60rpx;" center></u-cell>
					</u-list-item>
				</u-list>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import props from '../../uni_modules/uview-plus/libs/config/props';
	export default {
		props: {
			'itemList': Array,
			'placeholder': String,
			'itemLabel': String,
			'itemKey': String,
			'defaultValue': String,
			'parent':String
		},
		emits: ['selectVal','toast'],
		name: "z-page-picker",
		data() {
			return {
				keyword: '',
				show: false,
				value: {},
				dataLists: [],
				selectItem: {},
				keyName: '',
				labelName: ''
			};
		},
		watch:{
			'itemList': {
				handler(newVal) {
					 console.log('this.itemList=',this.itemList);
					 this.dataLists = this.itemList[0]				
				},deep: true
			}
		},
		computed: {
			showLabel(){
				let label = '';
				if(this.defaultValue==undefined||this.defaultValue==''){
					label = this.placeholder
				}else{
					label = this.defaultValue
				}
				return label
			}
		},
		
		created() {
			this.labelName = this.itemLabel
			this.keyName = this.itemKey
			
		},

		methods: {
			showOrHideChoose(){
				if(this.parent){
					this.show = !this.show
					this.$emit('selectVal')
				}else{
					this.$emit('toast')
				}
			},
			open() {
				this.keyword = ''
				
			},
			close() {
				this.show = false
			},
			search() {
				let keyword = this.keyword
				if (keyword != '') {
					this.dataLists = this.itemList[0].filter((item) => {
						return item.name.indexOf(keyword) != -1
					})
				}

			},
			select(item) {
				this.selectItem = item
				this.show = false
				this.$emit('selectVal', item)
			},

		}
	}
</script>

<style>

</style>